<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.ziti1{
				font-family: "times new roman","微软雅黑","宋体"  ;
				font-size: 30px;
			}
			
			ul {
				height: 600px;
				background: skyblue;
				border: 2px solid gray;
				margin-top: 50px;
				list-style: none;
				text-align: center;
			}
			
			ul li {
				width: 150px;
				height: 200px;
				display: inline-block;
				text-align: center;
				margin-top: 150px;
				transition: transform 2s;
			
				position: relative;
			}
			
			ul li img {
				width: 180px;
				height: 250px;
				border: 5px solid white;
			
			}
			
			ul li:nth-child(1) {
				transform: rotate(30deg);
			}
			
			ul li:nth-child(2) {
				transform: rotate(-40deg);
			}
			
			ul li:nth-child(3) {
				transform: rotate(10deg);
			}
			
			ul li:nth-child(4) {
				transform: rotate(45deg);
			}
			ul li:nth-child(5) {
				transform: rotate(30deg);
			}
			ul li:nth-child(6) {
				transform: rotate(-40deg);
			}
			ul li:nth-child(7) {
				transform: rotate(10deg);
			}
			ul li:nth-child(8) {
				transform: rotate(45deg);
			}
			
			ul li:hover {
				transform: rotate(0deg) scale(1.5);
				z-index: 999;
				/* 需要设置定位流 */
			}
		</style>
	</head>
	<body>
		<p class="ziti1">李易峰的杂志:</p>
		
		<ul>
			<li><img src="img/zazhi1.jpg" alt=""></li>
			<li><img src="img/zazhi2.jpg" alt=""></li>
			<li><img src="img/zazhi3.jpg" alt=""></li>
			<li><img src="img/zazhi4.jpg" alt=""></li>
			<li><img src="img/zazhi5.jpg" alt=""></li>
			<li><img src="img/zazhi6.jpg" alt=""></li>
			<li><img src="img/zazhi7.jpg" alt=""></li>
			<li><img src="img/zazhi8.jpg" alt=""></li>
		</ul>
	</body>
</html>
